<template>
  <el-card style="width: 100%;" class="Comment">
    <template #header>
      <div class="header">
        <span>评论管理</span>
     <div class="left"><el-input @keyup.enter="searchComment" v-model="searchData" placeholder="搜索">
      <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
    </el-input></div>
      </div>
    </template>
    <el-table 
    :data="commentsList" 
    stripe
    style="width: 100%"
    v-loading.fullscreen.lock="loadingfalg"
    >
    <el-table-column type="index" width="50" />
    <el-table-column align="center"  prop="serial" label="订单编号" width="130" />
    <el-table-column align="center" prop="user_name" label="用户名" min-width="120"  />
    <el-table-column align="center" prop="matron_name" label="月嫂" />
    <el-table-column align="center" prop="create_date" min-width="110" label="评论时间"/>
    <el-table-column align="center" prop="star" label="评分"  />
    <el-table-column
    label="评论内容" width="280"
    >
      <template #default="scope">
        <div  style="height: 120px; overflow: auto;"><text>{{ scope.row.content }}</text></div>
      </template>
    </el-table-column>
    <el-table-column
     label="图片" width="200"
     align="center"
    >
      <template #default="scope">
        <el-image v-if="scope.row.is_img" preview-teleported style="width: 100px; height: 100px;" :preview-src-list="previewList(scope.row.urls)"  :src=" scope.row.urls[0].url" fit="cover"></el-image>
      <el-empty v-else  description="无图片"  image-size="40" ></el-empty>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button plain type="primary" :icon="Edit"  size="small" @click="alterComment(scope.$index)"
          ></el-button
        >
        <el-button plain  type="danger" :icon="Delete" size="small" @click="deleteComment(scope.$index)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination"> <el-pagination 
    background layout="prev, pager, next"
    v-model:current-page="page_data.page_num"
    v-model:page-size="page_data.page_size"
     :total="page_data.page_count*page_data.page_size"
     @current-change="currentChange"
     /></div>
  </el-card>
  <el-dialog
    v-model="alterdailog"
    title="修改评论"
    width="525"
    align-center
  >
    <div class="dailog-box">
      <div class="order-box">
        <div class="order-info">
          <img src="@/assets/show.png" alt="" style="position: absolute;">
          <img :src="detailData.default_img" alt="">
        <div class="order-text">
          <div class="matron-name">{{ detailData.matron_name }}</div>
          <div class="date-start"><span>开始日期</span>:{{ detailData.date_start }}</div>
          <div class="date-end"><span>结束日期</span>:{{ detailData.date_end }}</div>

        </div>
        <div class="order-day">
          <div>
            <span>x</span>{{ detailData.Day }}天
          </div>
        </div>
        </div>
        <div class="price-box">
          <div class="price"> 合计:<span>￥</span><span class="price-text">{{ detailData.price }}</span></div>
        </div>
      </div>
      <div class="comment-box">
        <div class="user_info">
        <img :src="detailData.user_img" alt="">
        <div class="user_text">
          <div class="user_name">{{ detailData.user_name }}</div>
          <div class="create_time">{{ detailData.create_date }}</div>
        </div>
      </div>
  
    <div class="content-box">
      <div class="star">
      <div class="text-star">评分:</div>
      <el-rate v-model="detailData.star" size="large" class="rate" />
    </div>
    <div class="comment">
      <el-input type="textarea" 
      :autosize="{ minRows: 5 , maxRows:7}"
      v-model="detailData.comment"
      ></el-input>
    </div>
    <div class="comment-img">
      <el-upload
       
        v-model:file-list="detailData.urls_list"
        :action="host"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handsuccess"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
    </div>
    </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="alterdailog = false">取消</el-button>
        <el-button type="primary" @click="uploadComment">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref ,computed} from 'vue'
import {
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { Plus,Search } from '@element-plus/icons-vue'
import {getComments,getCommentDetail,deleteCommentapi ,searchCommentapi,alterCommentapi} from '@/api/comments'
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
const searchComment =async ()=>{
  console.log(searchData.value);
  
  // const res = await searchCommentapi({
  //   page_num:page_data.value.page_num,
  //   page_size:page_data.value.page_size,
  //   q:searchData.value
  // })
  const res = await searchCommentapi('?page_num='+page_data.value.page_num+'&page_size='+page_data.value.page_size+'&q='+searchData.value)
  if(res.code == 200){
    commentsList.value = res.data.list
    page_data.value.page_count = res.count
  }
}
const searchData = ref('')
const computDay = (start,end) =>{
  const startDay = new Date(start)
  const endDay = new Date(end)
  return  (endDay.valueOf() - startDay.valueOf())/(24*60*60*1000)
}

const loadingfalg = ref(false)
//预览图列表计算
const previewList=computed(()=>(arr)=>{
  const res_arr=[]
for(let i=0;i<arr.length;i++){
res_arr.push(arr[i].url)
}
return res_arr
})
const host = ref('https://www.damer.asia/api/admin/image/')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleRemove= (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  console.log(detailData.value.urls_list)
}
const handsuccess=(response,uploadFile,uploadFiles)=>{
console.log('ok',response,uploadFile,uploadFiles)
detailData.value.urls_list.pop()
detailData.value.urls_list.push({id:response.id,url:'https://www.damer.asia/'+response.url})
console.log(detailData.value.urls_list)
}
const handlePictureCardPreview = ()=>{
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
//修改评论窗口
const alterdailog = ref(false)
//评论详情数据
const detailData = ref({
id:1,
urls_list:[
  {
    id:1,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
  {
    id:2,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
  {
    id:4,
    url:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545'
  },
],
Day:3,
user_img:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
user_name:'张三',
comment:'大家ask了解发的离开洒家防空雷达数据啊分厘卡电视机按付款了多少就发来的撒娇放大克里夫几点上课了几分上课了',
create_date:'2020-02-02',
is_img:true,
matron_name:'里斯',
default_img:'http://43.138.132.222:8886/group1/M00/00/02/CtM3BVrRdLGARgBAAAVslh9vkK00474545',
price:20000,
date_start:'2020-02-02',
date_end:'2021-02-02',
serial:'23214214321',
star:3
})
const deleteComment = async (index) => {

console.log(commentsList.value[index].comment_id)

await ElMessageBox.confirm('确定删除该评论，删除后无法恢复', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
const res = await deleteCommentapi({comment_id:commentsList.value[index].comment_id})
console.log('deleteres',res) 
if(res.code == 0 || res.code == 200){
  ElMessage.success('删除成功')
}  
else{
  ElMessage.error('删除失败')
}
}
const alterComment =async (index) =>{
  console.log('commentid',commentsList.value[index].comment_id)
loadingfalg.value = true
const res =await getCommentDetail({comment_id:commentsList.value[index].comment_id})
detailData.value = res.data
detailData.value.Day = computDay(detailData.value.date_start,detailData.value.date_end)
console.log(detailData.value);
alterdailog.value = true
loadingfalg.value = false
}
const uploadComment =async () =>{
  // console.log(detailData.value)
console.log('上传数据',{
    comment_id:detailData.value.id,
    content:detailData.value.comment,
    star:detailData.value.star,
    urls:detailData.value.urls_list,
    is_img:detailData.value.urls_list.length == 0 ? false:true
  });

  const res =await alterCommentapi({
    comment_id:detailData.value.id,
    content:detailData.value.comment,
    star:detailData.value.star,
    urls:detailData.value.urls_list,
    is_img:detailData.value.urls_list.length == 0 ? false:true
  })
  console.log('alterres',res);
  if(res.code == 200){
  alterdailog.value = false
ElMessage.success('修改成功')

  }
  else{
    ElMessage.error('修改失败')
  }
  
}
const commentsList = ref([
  {
user_name:'damer',
comment_id:1,
star:4,
matron_name:'张三',
create_date:'2020-09-10',
serial:'21402903201',
content:'阿姨真的而非法艰苦拉萨积分卡啦JFK老大家房客了俺看了大家发奥克兰就疯狂垃圾疯狂垃圾弗克拉家房客了的阿克洛夫尔喀里就',
is_img:false,
urls:[],

  },
  {
user_name:'damer',
comment_id:2,
star:4,
matron_name:'张三',
create_date:'2020-09-10',
serial:'21402903200',
content:'阿姨真的而非法艰苦拉萨积分卡啦JFK老大家房客了俺看了大家发奥克兰就疯狂垃圾疯狂垃圾弗克拉家房客了的阿克洛夫尔喀里就',
is_img:true,
urls:[],

  }
])
const page_data = ref({
  page_num:1,
  page_size:15,
  page_count:1,
})
const currentChange = async (num)=>{
  page_data.value.page_num = num
  loadingfalg.value  = true
  const res = await getComments(page_data.value)
  commentsList.value = res.data.list
  page_data.value.page_count = res.data.count
  loadingfalg.value = false
  console.log('comment',res.data.list)
}
const getCommentsData = async () => {
  loadingfalg.value  = true
  const res = await getComments(page_data.value)
  commentsList.value = res.data.list
  page_data.value.page_count = res.data.count
  loadingfalg.value = false
  console.log('comment',res.data.list)

}
getCommentsData()
</script>
<style lang="scss" scoped>
*{
  user-select: none;
}
.Comment {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pagination{
    display: flex;
    justify-content: center;
    padding: 40px 0px;
  }
}
.dailog-box{
  .order-box{
    padding: 2px 0px 0px 0px;
    margin-bottom: 20px;
    letter-spacing: 0.03em;
    border-radius: 1%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    .order-info{
      position: relative;
      display: flex;
    align-items:stretch;
    padding: 8px;
    .order-day{
      display: flex;
      justify-content: flex-end;
      align-items: end;
      flex-grow: 1;
      padding: 2px;
      letter-spacing: 0.05em;
      font-size: 18px;
        color: rgb(0, 0, 0);
      span{
        
        color: rgba(0,0,0,0.4);
      }
    }
    }
    .price-box{
      width: 100%;
      border-top: .5px solid rgba(0,0,0,0.2);
      .price{
        padding: 8px 10px;
        color: rgba(0, 0, 0,.8);
        text-align: right;
        font-size: 15px;
        span{
          color: rgba(233, 18, 18, 1);
        }
        .price-text{
          font-size: 21px;
        }
      }
    }
    img{
      border-radius: 5px;
      width: 80px;
      height: 80px;
    
    }
    .order-text{
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 5px;
      color: rgba(0,0,0,0.5);
      span{
        color: rgba(0,0,0,0.8);
      }
 
     .matron-name{
      color: black;
      font-size: 18px;
      letter-spacing: 0.05em;
      margin: 2px 0px;
     }
     .date-start{
      margin: 1px 0px;
     }

    }
  }
  .comment-box{
    border-radius: 1%;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
    padding: 3px 0px 8px 0px;
    .user_info{
    display: flex;
    align-items: center;
    padding: 7px 5px;
    border-bottom: 0.5px solid rgba(0,0,0,0.2);
    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin: 0px 5px ;
    }
    .user_text{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      .user_name{
        color: black;
        font-size: 16px;
        margin: 3px 0px;
      }
      .create_time{
        color: rgba(0,0,0,0.5);
      }
    }
  }
  .content-box{
    margin: 10px 8px;
    .comment{

    margin: 10px 10px 10px 0px;
  }
  .star{
    display: flex;
    align-items: center;
    font-size: 16px;
    margin: 0px 1px;
  }

  }
 

  }
}
</style>
